<template>
    <div class="integral"> 
       <div class="top">
           <p>商城</p>
       </div>
       <div class="integral-body">
           <div class="integral-img">
               <img src="../../assets/jifen.png">
               <h3>当前积分:{{user.integration}}</h3>
           </div>
       </div>
        <h3>商品列表</h3>
       <div class="integral-list">
            <div class="box"  v-for="(item,index) in list" :key="index">
                <img :src="item.image">
                <h4>{{item.name}}</h4>
                <div class="integral-change"> 
                    <img src="../../assets/money.png">
                    <p>{{item.price}}积分</p>
                    <button @click="change(item)">兑换</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState,mapMutations } from 'vuex'
export default ({
    name:'integral',
    computed:{
         ...mapState ({
            user:state => state.login,
            list:state => state.list,
        }),
    },
    created(){
        this.show()
    },
    methods:{
    
        ...mapMutations(['showList','userLogin','userLogins']),
        //渲染商品列表
        async show() {
            const data = await this.aGet('/shop/shopList');
            this.showList(JSON.parse(JSON.stringify(data)))
            console.log(data)
            console.log(this.user.integration)
        },
        //兑换接口
        async change(item) {
            const data = await this.aPut('/shop/exchange',{
                id:item._id
            })
            if (data) {
                this.show()
                this.user.integration = this.user.integration - item.price
                this.userLogins(this.user)
                this.$message({
                    message: '恭喜你，兑换成功',
                    type: 'success',
                    duration: 1000,
                    offset: '150'
                })
            }
        }
    }
})
</script>
<style lang="scss">
.integral{
    margin-left: 300px;
    & > h3{
        margin-left: 70px;
    }
    .top{
        width: 100%;
        height: 40px;
        box-shadow: 0 0 6px rgb(210, 210, 210);
        p{
            margin-left: 40px;
            font-size: 18px;
            line-height: 40px;
        }
    }
    &-body{
        width: 98%;
        margin: 20px auto;
        &-img{
            width: 100%;
            height: 200px;
            position: relative;
        }
        img{
            width: 1000px;
            margin: 4% 5%;
        }
        h3{
            position: absolute;
            top: 150px;
            left: 55%;
            font-size: 22px;
            color: #fff;
        }
    }
    .integral-list{
        width: 90%;
        margin: 0 auto;
        .box{
            margin-top: 10px;
            width: 200px;
            height: 260px;
            border-radius: 14px;
            box-shadow: 0 0 4px rgb(169, 168, 168);
            float: left;
            margin-right: 50px;
            & > img{
                width: 200px;
                height: 200px;
                border-radius: 12px;
            }
            h4{
                font-size: 12px;
                margin-top: 6px;;
                height: 16px;
                overflow: hidden;
                color: rgb(152, 152, 152);
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                display:-webkit-box;
                // text-overflow: ellipsis;
                // overflow: hidden;
            }
            button{
                width: 60px;
                background: #7c4bac;
                color: #fff;
                border: none;
                border-radius: 6px;
                float: right;
            }
        }
        .integral-change{
            width: 180px;
            margin: 10px auto;
            img{
                width: 20px;
                height: 20px;
                float: left;
            }
            & > p{
                width: 60px;
                display: inline-block;
                font-size: 14px;
                color: #7c4bac;
            }
        }
    }
}
</style>
